<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '分配用户' : '分配用户'" append-to-body width="500px" center>
        <div>
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText" clearable>
            </el-input>
            
            <div class="tree">
                <el-tree
                    :data="data2"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    accordion
                    highlight-current
                    :filter-node-method="filterNode"
                    :props="defaultProps">
                </el-tree>
            </div>

            <div class="buttons">
                <el-button @click="setCheckedKeys" class="setChecked"></el-button>
                <el-button @click="resetChecked">清空</el-button>
                <el-button @click="getCheckedKeys" :disabled="this.data2.length===0">保存</el-button>                
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { roleTreesave } from '@/api/request'
import qs from 'qs'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    data() {
        return {
            loading: false, dialog: false, permissions: [],
            filterText: '',
            data2:[
                
            ],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            checkList: [],
            roleId:''
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        getCheckedKeys() {
            // console.log(this.$refs.tree.getCheckedKeys());
            let params = {
                roleId:this.roleId,
                userIds:(this.$refs.tree.getCheckedKeys()).toString()  
            }
            roleTreesave(params).then(res =>{
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
                this.dialog = false
                this.$parent.init();
            })
        },
        
        setCheckedKeys() {
            this.$refs.tree.setCheckedKeys(this.checkList);
        },
        resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
        },
    },
    mounted:function(){
       
    },
}
</script>

<style scoped lang="scss">
.tree{
    margin: 20px 0 0 -22px;
    max-height: 400px;
    overflow-y: auto;
}
.buttons{
    margin-top:25px;
    text-align: center;
    .setChecked{
        display:none
    }
}
</style>
